<template>
   <div id="app">
        <div class="searchbox">
            <input type="text" placeholder="输入关键词" v-model="searchText">
            <span @click="search">搜索</span>
        </div>
        <div class="block">
            <div class="title">历史搜索</div>
            <div class="list">
                <span v-for="(item,index) in searchArr" :key="index"> {{item}} </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   data(){
    return{
        el:'#app',
        searchText:'',
        searchArr:['30涵道','四合一高频头','20a电调']
    };
   },
   methods:{
        search(){  
            if( this.searchText ){
                this.searchArr.push( this.searchText );
                this.searchText = '';
            }
        }
    }
}
</script>

<style>
 *{
     margin: 0;
     padding: 0;
 }
 .searchbox{
     margin: 10px;
     display: flex;
     align-items: center;
 }
 .searchbox input{
     flex:1;
     height: 40px;
     background-color: #f5f5f5;
     outline: none;
     border: none;
     padding-left: 20px;
     border-radius: 20px;
 }
 .searchbox span{
     width: 60px;
     text-align: center;
 }

 .block{
     margin: 10px;
 }
 .block .title{
     font-weight: bold;
     padding: 10px 0;
 }
 .block .list span{
     display: inline-block;
     background-color: #f5f5f5;
     padding: 5px 10px;
     border-radius: 5px;
     margin-right: 10px;
     margin-bottom: 10px;
 }
</style>